<template>

  <!--  <a-select-->
  <!--    :options="enumList"-->
  <!--    :value.sync="__proxyValue"-->
  <!--    label-attr-name="Description"-->
  <!--    placeholder="请选择产品尺寸"-->
  <!--    v-bind="$attrs"-->
  <!--    v-on="$listeners"-->
  <!--    val-attr-name="Value"/>-->

  <el-select
    :loading="loading"
    :remote-method="remoteMethod"
    filterable
    placeholder="请输入宽|高来搜索"
    remote
    v-model="__proxyValue">
    <el-option
      :key="item.id"
      :label="item.name"
      :value="item.id"
      v-for="item in lastEnum">
    </el-option>
  </el-select>

</template>

<script>
  import ASelect from '@/components/ATheFridayClub/ASelect'
  import { getAllSize, GetProductShopType, GetProductStatus } from '@/api/productInformation'
  import { ERR_OK } from '@/utils/commons'
  import { debugLogger } from '@/utils/fridayClub/functianal'

  export default {
    name: 'productSizeSelect',
    components: { ASelect },
    props: {
      value: {
        type: [Number, String],
        require: true
      }
    },
    computed: {
      __proxyValue: {
        get() {
          return this.value
        },
        set(newValue) {
          console.log(newValue)
          this.$emit('update:value', newValue)
          // this.$emit('update:input', newValue)
        }
      },

      lastEnum() {
        //  日后完善滚动异步加载
        return this.enumList.map(({ SizeDetailId, Width, Height, Length }) => ({
          // name: `长${Length} - 宽${Width} - 高${Height}`,
          name: `宽${Width} - 高${Height}`,
          id: SizeDetailId
        }))
      }
    },

    created() {
      this.getData()
    },

    data() {
      return {
        enumList: Array.of(),
        loading: false
      }
    },
    methods: {
      async remoteMethod(query) {
        await this.getData({ inKey: query })
      },

      async getData({ inKey } = {}) {
        try {
          this.loading = true
          const { Code, Result } = await getAllSize({
            inKey,
            page: 1,
            pagesize: 100
          })
          if (Code === ERR_OK) {
            this.enumList = Result['Items']
          }
        } catch (e) {
          console.log(e)
        } finally {
          this.loading = false
        }
      }
    }

  }
</script>

<style lang="scss" scoped>

</style>
